<script lang="ts" setup>
import { ref } from 'vue'
import { usePhoneStore } from '@/stores'
import { PageSkip } from '@/utils/tools'

const props = defineProps({
  title: {
    type: String,
  },
  isBack: {
    type: Boolean,
    default: true,
  },
  backUrl: {
    type: String,
    default: 'navigateBack',
  },
})

const phoneStore = usePhoneStore()
const { top = 0, bottom = 0 } = phoneStore.phoneInfo ?? {}
const navBarHight = ref(`${bottom + 10}px`)
const backTagHight = ref(`${bottom - top}px`)
function back() {
  const pageList = ['/pages/index/index', '/pages/eat/eat', '/pages/goods/goods', '/pages/my/my']
  if (pageList.includes(props.backUrl)) {
    PageSkip(props.backUrl, 'switchTab')
    return
  }
  PageSkip(props.backUrl)
}
</script>
<template>
  <!-- 头部导航栏 -->
  <view class="navBarBox">
    <view class="headNavigationBar">
      <view class="iconfont icon-left" @tap.stop="back()"></view>
      <view class="title">{{ props.title }}</view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.navBarBox {
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 100vw;
  height: v-bind('navBarHight');
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 10px;
  z-index: 999;
}
.headNavigationBar {
  position: relative;
  width: 100%;
  height: v-bind('backTagHight');
  display: flex;
  align-items: center;
  font-size: 32rpx;
  .icon-left {
    position: absolute;
    left: 24rpx;
    bottom: 0;
    width: 100rpx;
    height: v-bind('backTagHight');
    line-height: v-bind('backTagHight');
    font-size: 40rpx;
    padding-left: 14rpx;
  }
  .title {
    position: absolute;
    top: 0rpx;
    left: 50%;
    height: v-bind('backTagHight');
    line-height: v-bind('backTagHight');
    transform: translateX(-50%);
  }
}
</style>
